<template>
  <div><h3>养只档案</h3></div>
<el-row>
   <el-col :span="4">
      <el-form-item label="可视耳号">
        <el-input
          v-model="form.proEarBegin"
          placeholder="请输入"
          style="width: 90px"
        />
      </el-form-item>
   </el-col>

   <el-col :span="5">
    <el-form-item label="电子耳标号" >
        <el-input
          v-model="form.electronicEarTag"
          placeholder="请输入"
          style="width: 90px"
        />
      </el-form-item>
  </el-col>

  <el-col :span="5">
    <el-form-item label="品种" style="width: 135px">
      <el-select
            v-model="form.varietyId"
            placeholder="请选择"
            style="width: 205px">
            <el-option
              v-for="item in varietyData"
              :key="item.varietyId"
              :label="item.varietyName"
              :value="item.varietyId"
            /> </el-select>
      </el-form-item>
  </el-col>

  <el-col :span="5">
    <el-form-item label="性别" style="width: 130px;margin-left: 30px" >
        <el-select v-model="form.gender" placeholder="请选择">
          <el-option label="男" value="男" />
          <el-option label="女" value="女" />
        </el-select>
      </el-form-item>
  </el-col>

  <el-col :span="5">
    
    <el-form-item label="出生日期">
        <el-date-picker
          v-model="value1"
          type="daterange"
          range-separator="~"
          start-placeholder="开始日期"
          style="width: 180px"
          end-placeholder="结束日期"
          :size="size"
          value-format="YYYY-MM-DD"
        />
      </el-form-item>
  </el-col>
</el-row>

<el-row style="margin-top: -20px;">
   <el-col :span="4">
    <el-form-item label="月龄">
        <el-input
          v-model="form.departmentName"
          placeholder="请输入"
          style="width: 70px"
        />-<el-input
          v-model="form.departmentName"
          placeholder="请输入"
          style="width: 70px"
        />
      </el-form-item>
   </el-col>

   <el-col :span="5">
    <el-form-item label="生长阶段" style="margin-left: 15px;">
        <el-select v-model="form.stage" placeholder="请选择" style="width: 90px">
          <el-option label="Zone one" value="shanghai" />
          <el-option label="Zone two" value="beijing" />
        </el-select>
      </el-form-item>
  </el-col>

  <el-col :span="5">
    <el-form-item label="位置" >
        <el-select v-model="form.cottagesId" placeholder="栋舍" style="width: 80px" >
          <el-option label="Zone one" value="shanghai" />
          <el-option label="Zone two" value="beijing" /> </el-select
        >-
        <el-select v-model="form.fieIdId" placeholder="栏位" style="width: 80px">
          <el-option label="Zone one" value="shanghai" />
          <el-option label="Zone two" value="beijing" />
        </el-select>
      </el-form-item>
  </el-col>

  <el-col :span="5">
    
    <el-form-item label="羊只类型" style="width: 163px">
        <el-select v-model="form.departmentTypeId" placeholder="请选择">
          <el-option label="种公" value="种公" />
          <el-option label="种母" value="种母" />
          <el-option label="后裔" value="后裔" />
        </el-select>
      </el-form-item>
  </el-col>

  <el-col :span="5">
    
    <el-form-item label="基因等级" style="width: 165px">
        <el-select v-model="form.gradeId" placeholder="请选择">
          <el-option label="未定级" value="未定级" />
          <el-option label="后备级" value="后备级" />
          <el-option label="核心级" value="核心级" />
        </el-select>
      </el-form-item>
  </el-col>
</el-row>

<el-row style="margin-top: -20px;">
   <el-col :span="4">
    <el-form-item label="生产等级" style="width: 160px">
        <el-select v-model="form.departmentTypeId" placeholder="请选择">
          <el-option label="Zone one" value="shanghai" />
          <el-option label="Zone two" value="beijing" />
        </el-select>
      </el-form-item>
   </el-col>

   <el-col :span="5">
    
    <el-form-item label="销售等级" style="width: 165px;margin-left: 13px;">
        <el-select v-model="form.departmentTypeId" placeholder="请选择">
          <el-option label="Zone one" value="shanghai" />
          <el-option label="Zone two" value="beijing" />
        </el-select>
      </el-form-item>
  </el-col>

  <el-col :span="5">
    
    <el-form-item label="繁殖状态" style="width: 165px;margin-left: -30px">
        <el-select v-model="form.departmentTypeId" placeholder="请选择">
          <el-option label="Zone one" value="shanghai" />
          <el-option label="Zone two" value="beijing" />
        </el-select>
      </el-form-item>
  </el-col>

  <el-col :span="5">
    
    <el-form-item label="繁殖状态天数" style="margin-left: -30px;">
        <el-input
          v-model="form.departmentName"
          placeholder="请输入"
          style="width: 70px"
        />-<el-input
          v-model="form.departmentName"
          placeholder="请输入"
          style="width: 70px"
        />
      </el-form-item>
  </el-col>

  <el-col :span="5">
    
    <el-form-item label="父耳号" style="margin-left: 12px">
        <el-input
          v-model="form.farEarNumber"
          placeholder="请输入"
          style="width: 95px"
        />
      </el-form-item>
  </el-col>
</el-row>

<el-row style="margin-top: -20px;">
   <el-col :span="4" style="margin-left: 15px;">
    <el-form-item label="母耳号">
        <el-input
          v-model="form.moEarNumber"
          placeholder="请输入"
          style="width: 90px"
        />
      </el-form-item>
   </el-col>

   <el-col :span="5">
    <el-form-item label="在场状态" style="width: 165px">
        <el-select v-model="form.departmentTypeId" placeholder="请选择">
          <el-option label="Zone one" value="shanghai" />
          <el-option label="Zone two" value="beijing" />
        </el-select>
      </el-form-item>
  </el-col>

  <el-col :span="5">
    <el-button type="danger" @click="getSheep">查询</el-button>
    <el-button type="primary">重置</el-button>
  </el-col> 
   
</el-row>

     
  <!-- 查询条件：可视耳号 电子耳标号  -->
  <el-form :model="form" label-width="auto" :inline="true">
    <!-- 可视耳号 -->

    <!-- 按钮 查询 重置 -->
    <el-form-item>

      <el-button type="danger" @click="femaleAdd">+新增种公</el-button>
      <el-button type="danger" @click="maleAdd">+新增种母</el-button>
      <el-button type="danger" @click="proAdd">+新增后裔</el-button>
    </el-form-item>
  </el-form>

  <el-table :data="tableData" height="600" style="width: 200%" >
    <el-table-column type="selection" width="55" />
    <el-table-column property="sleepInforId" label="序号" >
      <template #default="{$index}">
           {{ $index+1 }}
      </template>
    </el-table-column>
    <el-table-column property="earNumber"  label="可视耳号" width="120px" >
       <template #default="scope">
          <el-button type="primary" link @click="sleepInfor(scope.row.sleepInforId)">{{ scope.row.earNumber }}</el-button>
       </template>
    </el-table-column>
    <el-table-column
      property="electronicEarTag"
      label="电子耳号"
      show-overflow-tooltip
      width="130px"
    />
    <el-table-column property="varietyName" label="品种" />
    <el-table-column property="gender" label="性别" >
      <template #default="scope">
         <span v-if="scope.row.gender==1">公</span>
         <span v-else>母</span>
      </template>
    </el-table-column>
    <el-table-column property="sleepBirthDate" label="出生日期" width="120px" >
       <template #default="scope">
          <span>{{ scope.row.sleepBirthDate.substring(0,10) }}</span>
       </template>
    </el-table-column>
    <el-table-column property="address" label="日龄">
      <template #default="scope">
          <span>{{  scope.row.agetotal }}</span>
       </template>
    </el-table-column>
    <el-table-column property="address" label="月龄" >
      <template #default="scope">
          <span>{{ scope.row.agetotal/30.4368 }}</span>
       </template>
    </el-table-column>
    <el-table-column property="stayStatus" label="在场状态" >
      <template #default="scope">
          <span v-if="scope.row.stayStatus==0">待入场</span>
          <span v-else-if="scope.row.stayStatus==1">在场</span>
       </template>
    </el-table-column>
    <el-table-column property="address" label="阶段" >
       <template #default="scope">
        <span v-if="scope.row.birthdayId==null">--</span>
        <span v-if="scope.row.birthdayId==1">乳羊</span>
        <span v-if="scope.row.birthdayId==2">保育</span>
        <span v-if="scope.row.birthdayId==3">后备羊</span>
       </template>
    </el-table-column>
    <el-table-column property="address" label="类型" >
      <template #default="scope">
            <span v-if="scope.row.sleepTypeId==1">种公</span>
            <span v-if="scope.row.sleepTypeId==2">种母</span>
            <span v-if="scope.row.sleepTypeId==3">后裔</span>
       </template>
    </el-table-column>
    <el-table-column property="cottageTypeName" label="栋舍" >
      <template #default="scope">
            <span v-if="scope.row.cottageTypeId==null">--</span>
            <span v-else>{{ scope.row.cottageName }}</span>
       </template>
    </el-table-column>
    <el-table-column property="fieIdName" label="栏位" >
      <template #default="scope">
            <span v-if="scope.row.fieIdId==null">--</span>
            <span v-else>{{ scope.row.fieIdName }}</span>
       </template>
    </el-table-column>
    <el-table-column property="address" label="繁殖状态" >
       <template #default="scope">
            <span v-if="scope.row.gender==1">无状态</span>
            <span v-else-if="scope.row.gender==2&&scope.row.breedStatuId==1">后备空怀</span>
            <span v-else-if="scope.row.gender==2&&scope.row.breedStatuId==2">返青空怀</span>
            <span v-else-if="scope.row.gender==2&&scope.row.breedStatuId==3">未孕空怀</span>
            <span v-else-if="scope.row.gender==2&&scope.row.breedStatuId==4">流产空怀</span>
            <span v-else-if="scope.row.gender==2&&scope.row.breedStatuId==5">空胎空怀</span>
            <span v-else-if="scope.row.gender==2&&scope.row.breedStatuId==6">妊娠</span>
            <span v-else-if="scope.row.gender==2&&scope.row.breedStatuId==7">哺乳</span>
       </template>
    </el-table-column>
    <el-table-column property="address" label="是否妊检" >
      <template #default="scope">
            <span v-if="scope.row.gender==1">--</span>
            <span v-else-if="scope.row.gender==2&&scope.row.checkPre==null">未妊检</span>
            <span v-else-if="scope.row.gender==2&&scope.row.checkPre==1">已妊检</span>
       </template>
    </el-table-column>
    <el-table-column property="address" label="状态天数" >

    </el-table-column>
    <el-table-column property="address" label="生产等级" >
      <template #default="scope">
            <span v-if="scope.row.productLevel==null">未定级</span>        
       </template>
    </el-table-column>
    <el-table-column property="address" label="销售等级" >
      <template #default="scope">
            <span v-if="scope.row.buyLevel==null">未定级</span>           
       </template>
    </el-table-column>
    <el-table-column property="grade" label="基因等级" />
      <!-- <template #default="scope">
          <span v-if="scope.row.grade==1">未定级</span>
          <span v-if="scope.row.grade==2">后备级</span>
          <span v-if="scope.row.grade==3">核心级</span>
          <span v-if="scope.row.grade==0">生产级</span>         
       </template>
    </el-table-column> -->
    <el-table-column property="sleepBirthWeight" label="出生重" />
    <el-table-column property="address" label="断奶重" >
      <template #default="scope">
            <span v-if="scope.row.weanWeight==null">--</span>           
       </template>
    </el-table-column>
    <el-table-column property="address" label="断奶日期">
      <template #default="scope">
            <span v-if="scope.row.weanData==null">--</span>           
       </template>
    </el-table-column>
    <el-table-column property="address" label="断奶日龄" >
      <template #default="scope">
            <span v-if="scope.row.weanWeight==null">--</span>           
       </template>
    </el-table-column>
    <el-table-column property="farEarNumber" label="父耳号" >
      <template #default="scope">
          <span v-if="scope.row.farEarNumber==null">--</span>
          <span v-else>{{ scope.row.farEarNumber }}</span>
       </template>
    </el-table-column>
    <el-table-column property="moEarNumber" label="母耳号" >
      <template #default="scope">
          <span v-if="scope.row.moEarNumber==null">--</span>
          <span v-else>{{ scope.row.moEarNumber }}</span>
       </template>
    </el-table-column>
    <el-table-column fixed="right" label="操作" >
      <template #default>
        <el-button link type="danger" size="small" @click="del()">
          删除
        </el-button>
        <el-button link type="primary" size="small" @click="upd()"
          >修改</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue';
import axios from 'axios';
import { useRouter, useRoute } from 'vue-router';
import { ElTable } from 'element-plus';
import { ElMessage, ElMessageBox } from 'element-plus';
const router = useRouter();
const route = useRoute();
const value1 = ref(''); //日期
const size = ref<'default' | 'large' | 'small'>('default');
//生命周期 钩子函数
onMounted(() => {
  getSheep(); //养只档案-显示
  getvarietyData()
});
//跳转按钮
const femaleAdd=()=>{
  router.push({
    name:'SheepFarm',
    query:{
      typeId:1,
    }
  })
}
const maleAdd=()=>{
  router.push({
    name:'SheepFarm',
    query:{
      typeId:2,
    }
  })
}
const proAdd=()=>{
  router.push({
    name:'SheepFarm',
    query:{
      typeId:3,
    }
  })
}

//定义变量
const form = reactive({
  proEarBegin: '',
  electronicEarTag: '',
  varietyId: '',
  gender: '',
  sleepBirthDate: '',
  stage: '',
  cottagesId: '',
  fieIdId: '',
  gradeId: '',
  farEarNumber: '',
  moEarNumber: '',
});

//养只档案-显示
const tableData = ref([]);
const tableDataNull:any=ref([])
const getSheep = () => {
  axios
    .get('http://localhost:5039/api/SleepBegin/SearchSleepRecord')
    .then((res) => {
      console.log(res);
      tableData.value = res.data.data;
});
}

const sleepInfor=(id:any)=>{
  router.push({
    name:'SleepInforView',
    query:({
      id:id
    })
  })
}

//品种下拉框
const varietyData:any=ref([])
const getvarietyData=()=>{
  axios.get('http://localhost:5039/api/SleepBegin/SearchVariety').then(res=>{
    console.log('品种',res)
    varietyData.value=res.data.data
  })
}



const del = (id: any) => {
  ElMessageBox.confirm('确认要删除吗?', '警告', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      axios
        .get('')
        .then((res) => {
          console.log(res);
          // if (res.data.data == 1) {
          //   ElMessage.success('删除成功');
          //   getSheep();
          // } else {
          //   ElMessage.error('删除失败');
          // }
        })
        .catch((error) => {
          console.log(error);
        });
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消',
      });
    });
};
const upd = (id: any) => {
  
}
</script>

<style>
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>
